<template>
  <div style="padding: 15px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="领用单号" prop="code"
            >
              <el-input
                disabled
                v-model="form.code"
                style="width: 75%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item
              label="仓库"
              style="margin-right: 15px"
              label-width="120px"
            >
              <el-input
                disabled
                v-model="form.warehouseName"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="入驻商" prop="shipmentCode" >
              <el-select v-model="form.shipmentCode"
                         :disabled="true"
                         placeholder="请选择入驻商"
                         style="width:75%">
                <el-option
                  v-for="item in shipmentData"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="领用类型" prop="type">
              <el-select v-model="form.type"
                         :disabled="true"
                         placeholder="请选择领用类型" style="width:75%">
                <el-option
                  v-for="item in typeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="领用部门" prop="collectDept">
              <el-input v-model="form.collectDept" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="领用人" prop="collectBy">
              <el-input v-model="form.collectBy" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <el-form-item  label="备注">
              <el-input v-model="form.remarks" style="width:75%" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="goodsName" title="商品名称" width="270">
      </vxe-table-column>
      <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsUnitName" title="单位"  width="270">
      </vxe-table-column>
      <vxe-table-column field="unitQuantity" title="领用数量" width="120"></vxe-table-column>
      <vxe-table-column field="actualUnitQuantity" title="实际领用数量" width="120"></vxe-table-column>
      <vxe-table-column field="remarks" title="备注" ></vxe-table-column>
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETablePluginElement from 'vxe-table-plugin-element'
  import 'vxe-table-plugin-element/dist/style.css'
  import goodsSelect from '@/views/components/goodsElSelect.vue'
  import { collectDetail} from '@/api/store'
  import {getWarehouse, findShipmentPartys, getDictList} from '@/api/basicInfo'

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
  VXETable.use(VXETablePluginElement)
  export default {
    name: 'Parent',
    components: {
      goodsSelect,
    },
    data() {
      return {
        allAlign:'center',
        warehouseData:[],
        shipmentData:[],
        typeList: [],
        dictType: 'collectType',
        isDisable:false,   //确定键显示按钮
        typeList: [
          { code: "0", name: "仓库领用" },
          { code: "1",name: "财务领用" }
        ],
        form: {
          code:'',
          shipmentCode: '',
          type:'',
          warehouseCode:"",
          supplierCode:'',
          remarks: '', // 备注
          collectItemList: [],
          collectBy: '',
          collectDept: ''
        },
        loading: false,
        tableData: [],
        rules: {
          code: [
            { required: true, message: '', trigger: 'change' }
          ],
          shipmentCode: [
            { required: true, message: '请输入客户姓名', trigger: 'change' }
          ],
          warehouseCode: [
            { required: true, message: '请选择仓库', trigger: 'change' }
          ]
        },
        validRules: {
          goodsName: [
            { required: true, message: '商品名称必须填写' },
          ],
          goodsUnitName: [
            { required: true, message: '单位必须填写' },
          ],
          unitQuantity: [
            { required: true, message: '数量必须填写' },
          ],
        }
      }
    },
    created() {
      this.getWarehouse().then(()=>{
        this.getShipmentParties();
        this.getDictList(this.dictType);
      });
    },
    methods: {
      // 入驻商查询
      getShipmentParties(){
        findShipmentPartys().then(response => {
          this.shipmentData = response.data;
        })
      },
      // 仓库查询
      getWarehouse(){
        return getWarehouse().then(response => {
          this.warehouseData = response.data;
        })
      },
      // 单据类型字典查询
      getDictList(dictType){
        getDictList(dictType).then(response => {
          this.typeList = response.data[0].dictList;
          this.getInfo();
        })
      },
      // 获取页面信息
      getInfo() {
        this.loading = true;
        let code = this.$route.query.code ? this.$route.query.code : "";
        collectDetail(code).then(response => {
          this.form = response.data;
          this.tableData = this.form.collectItemList;
          this.loading = false
        })
      },
      // 选择入驻商
      setCustomerCode(value) {
        this.form.shipmentCode = value;
        this.tableData = [];
      },
      // 商品选择
      setGoodsCode(row){
        let obj = this.$refs.goodsSelect.obj
        row.goodsName = obj.value;
        row.goodsCode = obj.code;
        row.goodCode = obj.goodCode;
        row.goodsUnit = obj.unitCode;
        row.goodsBarCode = obj.barCode;
        row.goodsUnitConversionList = obj.goodsUnitConversionList;
      },
      // 单位选择
      selectGoodsUnitCode(event, row){
        row.goodsUnit = event.value;
        row.goodsUnitName = event.label;
      },
      footerMethod ({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 1) {
              return '合计'
            }
            if (['unitQuantity', 'actualUnitQuantity'].includes(column.property)) {
                return XEUtils.sum(data, column.property)
            }
            return '-'
          })
        ]
      },

      // 返回
      funcSubmitCheck() {
        this.$eventBus.$emit('refreshList')
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path: "/kngl/collect"
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 175px;
    // float: right;
  }
</style>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
